<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="beans.*"%>
<%@page import="service.*"%>
<%@page import="java.util.*"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
	background-color: #f5f5f5;
	font-family: Arial, sans-serif;
}

#m {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #ccc;
	width: 800px;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	font-size: 20px;
}

label {
	display: inline-block;
	width: 200px;
	margin-bottom: 10px;
	font-weight: bold;
}

#ks,#mz {
	width: 500px;
	border-radius: 10px;
	padding: 10px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	font-size: 16px;
}

input[type="submit"] {
	background-color: #4CAF50;
	border: none;
	color: #fff;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 10px;
	cursor: pointer;
}
input[type="button"]{
	background-color: #4CAF50;
	border: none;
	color: #fff;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 10px;
	cursor: pointer;
}
input[type="submit"]:hover {
	background-color: #3e8e41;
}
input[type="button"]:last-child {
	background-color: #f44336;
}

input[type="button"]:last-child:hover {
	background-color: #d32f2f;
}
table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 20px;
	font-size: 16px;
}

table th, table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}

table th {
	background-color: #f2f2f2;
	font-weight: bold;
}


        .pager {
            text-align: center;
            margin-top: 10px;
        }

        .pager a {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            text-decoration: none;
            border: 1px solid #ccc;
            background-color: #f2f2f2;
            color: #333;
        }

        .pager a.active {
            background-color: #ccc;
        }
        #page-size{
        width: 70px;
	border-radius: 10px;
	padding: 10px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	font-size: 16px;
        }
</style>
<%doctorSchedulingService doctorSchedulingService = new doctorSchedulingService();
%>
</head>
<body>
<%
ksService ksService = new ksService();
List<ksBean> list1 = ksService.browse();
mzService mzService = new mzService();
List<mzBean> list2 = mzService.browse();
%>
	<form action="../Main" id="m">
		<label>选择科室：</label> <select id="ks" name="ks" onclick="ksSelect()">
			<option value="-1" style="display: none;"></option>
			<%
			for (int i = 0; i < list1.size(); i++) {
			%>
			<option value=<%=list1.get(i).getName()%>><%=list1.get(i).getName()%></option>
			<%
			}
			%>
		</select><br> <label>选择门诊：</label> <select id="mz" name="mz"
			onclick="mzSelect()">
			<option value="-1" style="display: none;"></option>
		</select><br><input type="hidden" name="action"
			value="selectdoctorScheduling" > <input type="submit" value="查询" >
		<input type="button" value="重置" onclick="reset()">
		<table id="n">

			<thead>
				<tr>
					<th colspan="8">排班情况</th>
				</tr>
				<tr>
					<th style="display:none;">排班编号</th>
					<th>医生编号-姓名</th>
					<th>门诊编号-名称</th>
					<th>日期</th>
					<th>时间</th>
					<th>数量</th>
					<th>修改排班</th>
					<th>取消排班</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		 <div id="pager" class="pager">
            <a href="javascript:void(0);" id="first-page">首页</a>
            <a href="javascript:void(0);" id="prev-page">上一页</a>
            <a href="javascript:void(0);" id="next-page">下一页</a>
            <a href="javascript:void(0);" id="last-page">末页</a>
            <span>当前第 <span id="current-page">1</span> 页，共 <span id="total-pages">1</span> 页</span>
            <span>每页显示 <select id="page-size">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select> 条记录</span>
        </div>
	</form>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	var x=0;
	function ksSelect() {
		 var mz = document.getElementById("mz");
		  for (var i = mz.children.length - 1; i > 0; i--) {
		    mz.removeChild(mz.children[i]);
		  }
		  x=0;
	}
	function mzSelect() {
		if(x==0){
			var ks = document.getElementById("ks");
			  var mz = document.getElementById("mz");
			  let res=$.ajax({
				  url:"http://localhost:8080/work3/Main",
				  type: "GET",
				  data: {
					  ks:ks.value,
					  action: "getmzs"
				  },
				  async: false,
				  dataType: "text",
				  error: (err)=> {
					  console.log(err);
				  }
			  }) 
			 
			  
			  res.then((result)=>{
				  let resData = JSON.parse(result);
				  for(var i=0;i<resData.mzs.length;i++){
						var option = document.createElement('option');
						option.innerHTML = resData.mzs[i].id+"-"+resData.mzs[i].name;
						option.value = resData.mzs[i].id;
						mz.appendChild(option); 
					}
				  x++;
			  })
			  
			  
		}  
	}
		function reset(){
			var m = document.getElementById("m");
			m.reset();
		}
		<%doctorService doctorService = new doctorService();
		List<doctorSchedulingBean> list = (List<doctorSchedulingBean>)session.getAttribute("ss");
		if(list!=null){ %>
			alert(1);
			var tableData =<%=list.toString()%>;
			alert(tableData);
			var currentPage = 1;
	        var pageSize = 5;

	        function renderTable() {
	            var table = document.getElementById('n');
	            var tbody = table.getElementsByTagName('tbody')[0];
	            tbody.innerHTML = '';

	            var startIndex = (currentPage - 1) * pageSize;
	            var endIndex = Math.min(startIndex + pageSize, tableData.length);

	            for (var i = startIndex; i < endIndex; i++) {
	                var row = document.createElement('tr');
	                var rowData = tableData[i];

	                for (var j=0;j<rowData.length-1;j++) {
	                    var cell = document.createElement('td');
	                    cell.textContent = rowData[j];
	                    row.appendChild(cell);
	                }
	                var cell = document.createElement('td');
	                var cell1 = document.createElement('td');
	                var input = document.createElement('input');
	                var input1 = document.createElement('input');
	                input.type="button";
	                input.value="修改";
	                input1.type="button";
	                input1.value="取消";
	                cell.textContent = input;
	                cell1.textContent = input1;
	                row.appendChild(cell);
	                row.appendChild(cell1);
	                }
	                tbody.appendChild(row);
	            }
	        }

	        function renderPager() {
	            var pager = document.getElementById('pager');
	            var currentPageSpan = document.getElementById('current-page');
	            var totalPageSpan = document.getElementById('total-pages');
	            var firstPageLink = document.getElementById('first-page');
	            var prevPageLink = document.getElementById('prev-page');
	            var nextPageLink = document.getElementById('next-page');
	            var lastPageLink = document.getElementById('last-page');

	            var totalPages = Math.ceil(tableData.length / pageSize);
	            currentPage = Math.min(currentPage, totalPages);
	            currentPageSpan.textContent = currentPage;
	            totalPageSpan.textContent = totalPages;

	            if (currentPage === 1) {
	                firstPageLink.style.display = 'none';
	                prevPageLink.style.display = 'none';
	            } else {
	                firstPageLink.style.display = 'inline-block';
	                prevPageLink.style.display = 'inline-block';
	            }

	            if (currentPage === totalPages) {
	                nextPageLink.style.display = 'none';
	                lastPageLink.style.display = 'none';
	            } else {
	                nextPageLink.style.display = 'inline-block';
	                lastPageLink.style.display = 'inline-block';
	            }
	        }

	        function updateTable() {
	            renderTable();
	            renderPager();
	        }

	        function onPageChange(page) {
	            currentPage = page;
	            updateTable();
	        }

	        function onPageSizeChange(size) {
	            pageSize = size;
	            currentPage = 1;
	            updateTable();
	        }

	        var firstPageLink = document.getElementById('first-page');
	        var prevPageLink = document.getElementById('prev-page');
	        var nextPageLink = document.getElementById('next-page');
	        var lastPageLink = document.getElementById('last-page');
	        var pageSizeSelect = document.getElementById('page-size');

	        firstPageLink.addEventListener('click', function () {
	            onPageChange(1);
	        });

	        prevPageLink.addEventListener('click', function () {
	            onPageChange(currentPage - 1);
	        });

	        nextPageLink.addEventListener('click', function () {
	            onPageChange(currentPage + 1);
	        });

	        lastPageLink.addEventListener('click', function () {
	            onPageChange(Math.ceil(tableData.length / pageSize));
	        });

	        pageSizeSelect.addEventListener('change', function () {
	            onPageSizeChange(parseInt(pageSizeSelect.value));
	        });

	        updateTable();
		<%}
		session.removeAttribute("ss");
		%>
		
</script>
</body>
</html>